<template>
  <div class="showMapWrapper">
    <el-amap-search-box
        ref="searchBox"
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>
    <el-amap
      vid="map"
      class="amap-box"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      :center="center"
    >
      <el-amap-marker
        vid="marker"
        :position="center"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>
<script type='text/ecmascript-6'>
export default {
  components: {},

  data() {
    let self = this
    return {
      reload: this.reload,
      zoom: 18,
      lng: 0,
      lat: 0,
      loaded: false,
      address: '',
      //mark的时候显示tip
      label: {
        content: '',
        offset: [15, 15],
      },
      searchOption: {
        city: "",
        citylimit: false,
      },
      center: [0, 0],
      
      //插件集合
      plugin: [
        //工具条
        {
          pName: 'ToolBar',
          positon: 'LB',
        },
      ],
      events: {
        init(map) {
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all',
            city: '全国',
          })
          geocoder.getLocation(self.address, (status, result) => {
            if (status === 'complete' && result.geocodes.length) {
              //result.regeocode.formattedAddress就是具体位置
              //对搜索组件的input进行赋值
              self.$refs.searchBox.keyword = self.address;
              let lnglat = result.geocodes[0].location
              self.lng = lnglat.lng
              self.lat = lnglat.lat
              self.center = [self.lng, self.lat]
            }
          })
        },
      },
    }
  },
  created(){
      this.label.content=window.sessionStorage.getItem('place')
      this.address=window.sessionStorage.getItem('place')
  },
  methods:{
    //点击搜索后触发的事件
    onSearchResult(pois) {
      
      //这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
      this.center = [pois[0].lng, pois[0].lat];
      this.label.content=pois[0].address
      console.log(this.label.content);
    },
  }
}
</script>
<style lang='scss' scoped>
.showMapWrapper {
  width: 100%;
  margin: 0 auto;
  height: 400px;
  border: 1px solid #999;
}
.el-vue-search-box-container {
  width: 100% !important;
  margin-bottom: 10px;
}
</style>
